<template>
  <div class="vehicle-container">
    <el-row class="vehicle-header">
      <el-card>
        <el-form label-width="auto" :model="form">
          <el-row type="flex" justify="space-between">
            <el-form-item label="运输任务编号">
              <el-col :span="8">
                <el-input
                  v-model="form.transportTaskId"
                  class="inputStyle"
                  placeholder="请输入运输任务编号"
                  clearable
                />
              </el-col>
            </el-form-item>
            <el-form-item label="起始地机构">
              <el-col :span="8">
                <el-select
                  :value="institutionData.startAgencyName"
                  clearable
                  class="inputStyle"
                  placeholder="请选择起始地机构"
                >
                  <el-option class="tree" :value="form.startAgencyId">
                    <el-tree
                      :data="treeData"
                      :props="defaultProps"
                      @node-click="startClick"
                    />
                  </el-option>
                </el-select>
              </el-col>
            </el-form-item>
            <el-form-item label="目的地机构">
              <el-col :span="8">
                <el-select
                  :value="institutionData.endAgencyName"
                  clearable
                  class="inputStyle"
                  placeholder="请选择目的地机构"
                >
                  <el-option class="tree" :value="form.endAgencyId">
                    <el-tree
                      :data="treeData"
                      :props="defaultProps"
                      @node-click="endClick"
                    />
                  </el-option>
                </el-select>
              </el-col>
            </el-form-item>
          </el-row>
          <el-row type="flex">
            <el-form-item style="margin: 0" label="回车时间">
              <el-col :span="8">
                <el-date-picker
                  v-model="timeDate"
                  class="inputStyle"
                  type="datetimerange"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :default-time="['12:00:00']"
                />
              </el-col>
            </el-form-item>
            <el-form-item
              style="margin: 0; padding-left: 33px"
              label="车辆是否可用"
            >
              <el-col :span="8">
                <el-select
                  v-model="form.isAvailable"
                  clearable
                  class="inputStyle"
                  placeholder="请选择目的地机构"
                >
                  <el-option label="全部" value="" />
                  <el-option label="可用" :value="true" />
                  <el-option label="不可用" :value="false" />
                </el-select>
              </el-col>
            </el-form-item>
            <el-form-item style="margin: 0">
              <el-col>
                <el-button
                  class="buttonStyle"
                  type="primary"
                  size="small"
                  @click="searchClick"
                >查询</el-button>
                <el-button class="buttonStyle" size="small" @click="resetClick">重置</el-button>
              </el-col>
            </el-form-item>
          </el-row>
        </el-form>
      </el-card>
    </el-row>
    <el-row class="vehicle-footer">
      <el-card class="footer-card">
        <el-row>
          <el-table :data="tableData" stripe style="width: 100%" border>
            <el-table-column prop="name" label="运输任务编号" width="134.1" />
            <el-table-column prop="name" label="起始地机构" width="134.1" />
            <el-table-column prop="name" label="目的地机构" width="134.1" />
            <el-table-column prop="name" label="运单数量" width="134.1" />
            <el-table-column prop="name" label="出车时间" width="134.1" />
            <el-table-column prop="name" label="回车时间" width="134.1" />
            <el-table-column prop="name" label="车牌号码" width="134.1" />
            <el-table-column prop="name" label="车辆是否可用" width="134.1" />
            <el-table-column prop="address" label="操作">
              <template>
                <el-button type="text">编辑</el-button>
                <el-button type="text">删除</el-button>
              </template>
            </el-table-column>
            <template slot="empty">
              <el-empty :image-size="150" description="暂无数据" />
            </template>
          </el-table>
        </el-row>
        <el-row
          type="flex"
          justify="center"
          style="margin-top: 10px; height: 40px"
          align="middle"
        >
          <el-pagination
            :current-page="form.page"
            :page-sizes="[10, 20, 30, 40]"
            :page-count="pages"
            :page-size="form.pageSize"
            :pager-count="7"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="sizeChange"
            @current-change="gurrentChange"
          />
        </el-row>
      </el-card>
    </el-row>
  </div>
</template>

<script>
import { getTreeDataAPI, getVehicleReturnAPI } from '@/api/vehicle'
export default {
  data() {
    return {
      // 回车时间
      timeDate: [],
      // 表单数据
      form: {
        endAgencyId: '',
        intoStorageEndTime: '',
        intoStorageStartTime: '',
        isAvailable: true,
        page: 1,
        pageSize: 10,
        startAgencyId: 0,
        transportTaskId: ''
      },
      // 表格数据
      tableData: [],
      // 选中机构名称
      institutionData: {
        endAgencyName: '',
        startAgencyName: ''
      },
      // 树形数据
      treeData: [],
      // optionValue
      value: '',
      // 树形控件配置
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      // 总页数
      total: 0,
      // 总页数
      pages: 1
    }
  },
  created() {
    // this.tableListData()
    this.treeInstitution()
  },
  methods: {
    // 获取表格数据{未完成}
    async tableListData() {
      const res = await getVehicleReturnAPI(this.form)
      console.log(res)
    },
    // 获取机构树
    async treeInstitution() {
      const { data } = await getTreeDataAPI()
      const tree = JSON.parse(data.data)
      this.treeData = tree
    },
    // 起始地地点击事件
    startClick(item, node, self) {
      this.form.startAgencyId = item.id
      this.institutionData.startAgencyName = item.name
    },
    // 目的地点击事件
    endClick(item, node, self) {
      this.form.endAgencyId = item.id
      this.institutionData.endAgencyName = item.name
    },
    // 查询
    searchClick() {
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.tableListData()
      }, 500)
    },
    // 重置
    resetClick() {
      this.form.endAgencyId = null
      this.form.intoStorageStartTime = null
      this.form.intoStorageEndTime = null
      this.form.isAvailable = null
      this.form.startAgencyId = null
      this.form.transportTaskId = null
      this.institutionData.endAgencyName = null
      this.institutionData.startAgencyName = null
      clearTimeout(this.timer)
      setTimeout(() => {
        this.tableListData()
      }, 500)
    },
    // 页码改变
    sizeChange(pageSize) {
      this.form.pageSize = pageSize
    },
    // 当前页改变
    gurrentChange(page) {
      this.form.page = page
    }
  }
}
</script>

<style scoped lang="scss">
.vehicle-container {
  padding: 0 20px;
  .vehicle-header {
    margin-bottom: 20px;
    .el-form-item {
      padding: 0 20px;
      .inputStyle {
        width: 270px;
      }
      .buttonStyle {
        width: 80px;
        height: 30px;

        &.buttonStyle:first-child {
          background-color: #189450;
          border-color: #189450;
          margin-right: 10px;

          &:hover {
            opacity: 0.7;
          }
        }
      }
    }
    .header-footer {
      margin: 0;
    }
  }
  .vehicle-footer {
    .footer-button {
      margin-bottom: 20px;
      background-color: #189450;
      border-color: #189450;
    }

    .footer-card {
      padding: 10px;
      padding-bottom: 0;
    }
  }
}
::v-deep .el-form-item__label {
  font-size: 13px;
}

::v-deep .el-table thead tr th {
  font-size: 13px;
  font-weight: bold;
  background: #f8faff !important;
  border: none;
}

::v-deep .el-table tbody tr td {
  font-size: 13px;
  color: #606266;
  border: none;
}
::v-deep .el-input__inner {
  height: 35px;
  font-size: 13px;
}
::v-deep .el-pagination .el-select .el-input .el-input__inner {
  height: 28px;
  font-size: 13px;
}

// test
.tree {
  padding: 0;
  height: auto;
  overflow: auto;

  // 滚动条
  &::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }
}
</style>
